<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
   <div id="box">
    hello：{{mesg}}
    <span v-if = "visible">fengzhilun</span>
    <select name="wang" id="">
        <option value="" v-for="item in categories">{{item.text}}</option>
    </select>
    <button v-on:click = "hide">关闭</button>
    <button v-on:click = "show">显示</button>
    乘数1 <input type="text" v-model="m1">, 乘数2 <input type="text" v-model="m2">, 乘积:{{result3}}
    <ul>
        <li v-for="item in categories">{{item.id}}{{item.text}}</li>
        <br>
        <todo-item v-bind:data="item"v-for="item in categories"></todo-item>
        <!-- <todo-item></todo-item> -->

    </ul>
   </div>
   <script>

       Vue.component('todo-item',{
           props:['data'],
           template:'<li>{{data.text}}</li>'
       })
       var vm = new Vue({
           el:'#box',
           data:{
               mesg:'学习vue',
               visible:false,
                categories:[
                    {id:1,text:'java'},
                    {id:2,text:'java2'},
                    {id:3,text:'java3'},
                ],
                m1:0,
                m2:0,
                result:0
           },
          methods:{
              hide:function(){
                  this.visible =false;
              },
              show:function(){
                  console.log(this);
                  this.visible =true;
              },
              getResult:function(){
                  return this.m1*this.m2;
              }
          },
          computed:{
              result3:function(){
                  return this.m1*this.m2;
              },
              result2:function(){
                  return 100;
              }
          }
       })
   </script>
</body>
</html>